<template>
  <view class="index-container">
    <navigation-bar>
      <view class="top-title-bar">
        <view class="left-my-avatar">
          <navigator url="/pages/my/my" hover-class="none" style="width: 36px;height: 36px;">
            <image class="inner-img" :style="{'max-width': `${bar_topHeight}px`, 'max-height': `${bar_topHeight}px`}"
              src="@/static/avatar.png" mode="aspectFill"></image>
          </navigator>
        </view>
        <view class="follow-title">
          Campus circle
        </view>
      </view>
    </navigation-bar>
    <view class="index-main-wrapper" :scroll-y="true"
      :style="{height: `calc(100% - ${statusbarHeight}px - ${bar_topHeight}px - 100rpx)`, 'min-height': `calc(100vh - ${statusbarHeight}px - ${bar_topHeight}px - ${bangs_Height}px - 400rpx)`}">
      <cc-tab ref="ccTab" :tab-list="tabList" :scroll-y="scrollDeraction" @click-tab="onClickTab"
        @change-swiper="onChangeSwiper">
        <template v-slot:tab="{ tabItem }">
          <view class="tab-inner-box">{{tabItem.name}}</view>
        </template>
        <template v-slot:推荐>
          <view class="recommend-inner-box">
            <!-- 副标签切换栏 -->
            <view class="sub-tab-wrap" @touchmove="onSubTabTouchMove">
              <u-tabs :list="sub_TabList" :current="subCurrent" @change="onSubTabChange" lineHeight="0"
                :scrollable="false"
                :itemStyle="{height: '70rpx','border-radius': '20rpx','background-color': '#F3F3F3', 'font-weight': 800,padding: 0}"
                :activeStyle="{color: '#FFF', 'font-size': '28rpx',padding: '14rpx 20rpx','background-color': '#000','border-radius': '20rpx','transition-property': 'background-color, color', 'transition-duration': '0.3s', 'transition-timing-function': 'ease'}"
                :inactiveStyle="{color: '#000', 'font-size': '28rpx',padding: '14rpx 20rpx'}"></u-tabs>
            </view>
            <swiper :duration="300" style="height: calc(100% - 90rpx);" :current="subCurrent"
              @change="onSubSwiperChange">
              <swiper-item>
                <!-- 全部展示帖子列表区域 -->
                <z-paging ref="paging" v-model="postList" cache-key="postList" @scroll="onScroll"
                  @onRefresh="onRefreshHandler" @query="onQuery">
                  <view class="scroll-content">
                    <!-- 中心热帖标语 -->
                    <view class="main-focus-content">
                      <image class="bg-img" src="@/static/post-cover1.png" mode="aspectFill"></image>
                      <navigator url="/subpkg/hotposts-ranking/hotposts-ranking" hover-class="none"
                        class="main-content">
                        <view class="official-hot-session">
                          <view class="official">
                            Campus circle官方
                          </view>
                          <view class="session">
                            2023.08.23期
                          </view>
                        </view>
                        <view class="hot-slogan">
                          火热帖子都在这，在这里看到身边发生的火热的一切！！！
                        </view>
                        <view class="hot-level">
                          <view class="icon iconfont">
                            &#xe625;
                          </view>
                          <view class="num">
                            10.8w
                          </view>
                        </view>
                      </navigator>
                    </view>
                    <!-- 全部展示帖子列表 -->
                    <view style="margin-top: 40rpx;" v-for="post in postList" :key="post.id">
                      <post-item :post="post" page="index" @focus-handler="onFocusClick"></post-item>
                    </view>
                  </view>
                </z-paging>
              </swiper-item>
              <swiper-item>
                <!-- 二手帖子列表区域 -->
                <z-paging ref="pagingidle" v-model="idlePostList" cache-key="idlePostList" @onRefresh="onRefreshHandler"
                  @scroll="onScroll" @query="onIdleQuery">
                  <view class="scroll-content">
                    <!-- 中心热帖标语 -->
                    <view class="main-focus-content">
                      <image class="bg-img" src="@/static/post-cover1.png" mode="aspectFill"></image>
                      <navigator url="/subpkg/hotposts-ranking/hotposts-ranking" hover-class="none"
                        class="main-content">
                        <view class="official-hot-session">
                          <view class="official">
                            Campus circle官方
                          </view>
                          <view class="session">
                            2023.08.23期
                          </view>
                        </view>
                        <view class="hot-slogan">
                          火热帖子都在这，在这里看到身边发生的火热的一切！！！
                        </view>
                        <view class="hot-level">
                          <view class="icon iconfont">
                            &#xe625;
                          </view>
                          <view class="num">
                            10.8w
                          </view>
                        </view>
                      </navigator>
                    </view>
                    <!-- 二手帖子列表 -->
                    <view style="margin-top: 40rpx;" v-for="post in idlePostList" :key="post.id">
                      <post-item :post="post" page="index" @focus-handler="onFocusClick"></post-item>
                    </view>
                  </view>
                </z-paging>
              </swiper-item>
              <swiper-item>
                <!-- 求购帖子列表区域 -->
                <z-paging ref="pagingbuy" v-model="buyPostList" cache-key="buyPostList" @onRefresh="onRefreshHandler"
                  @scroll="onScroll" @query="onBuyQuery">
                  <view class="scroll-content">
                    <!-- 中心热帖标语 -->
                    <view class="main-focus-content">
                      <image class="bg-img" src="@/static/post-cover1.png" mode="aspectFill"></image>
                      <navigator url="/subpkg/hotposts-ranking/hotposts-ranking" hover-class="none"
                        class="main-content">
                        <view class="official-hot-session">
                          <view class="official">
                            Campus circle官方
                          </view>
                          <view class="session">
                            2023.08.23期
                          </view>
                        </view>
                        <view class="hot-slogan">
                          火热帖子都在这，在这里看到身边发生的火热的一切！！！
                        </view>
                        <view class="hot-level">
                          <view class="icon iconfont">
                            &#xe625;
                          </view>
                          <view class="num">
                            10.8w
                          </view>
                        </view>
                      </navigator>
                    </view>
                    <!-- 求购帖子列表 -->
                    <view style="margin-top: 40rpx;" v-for="post in buyPostList" :key="post.id">
                      <post-item :post="post" page="index" @focus-handler="onFocusClick"></post-item>
                    </view>
                  </view>
                </z-paging>
              </swiper-item>
              <swiper-item>
                <!-- 求助帖子列表区域 -->
                <z-paging ref="paginghelp" v-model="helpPostList" cache-key="helpPostList" @onRefresh="onRefreshHandler"
                  @scroll="onScroll" @query="onHelpQuery">
                  <view class="scroll-content">
                    <!-- 中心热帖标语 -->
                    <view class="main-focus-content">
                      <image class="bg-img" src="@/static/post-cover1.png" mode="aspectFill"></image>
                      <navigator url="/subpkg/hotposts-ranking/hotposts-ranking" hover-class="none"
                        class="main-content">
                        <view class="official-hot-session">
                          <view class="official">
                            Campus circle官方
                          </view>
                          <view class="session">
                            2023.08.23期
                          </view>
                        </view>
                        <view class="hot-slogan">
                          火热帖子都在这，在这里看到身边发生的火热的一切！！！
                        </view>
                        <view class="hot-level">
                          <view class="icon iconfont">
                            &#xe625;
                          </view>
                          <view class="num">
                            10.8w
                          </view>
                        </view>
                      </navigator>
                    </view>
                    <!-- 求助帖子列表 -->
                    <view style="margin-top: 40rpx;" v-for="post in helpPostList" :key="post.id">
                      <post-item :post="post" page="index" @focus-handler="onFocusClick"></post-item>
                    </view>
                  </view>
                </z-paging>
              </swiper-item>
              <swiper-item>
                <!-- 帖子帖子列表区域 -->
                <z-paging ref="pagingcommon" v-model="commonPostList" cache-key="commonPostList"
                  @onRefresh="onRefreshHandler" @scroll="onScroll" @query="onCommonQuery">
                  <view class="scroll-content">
                    <!-- 中心热帖标语 -->
                    <view class="main-focus-content">
                      <image class="bg-img" src="@/static/post-cover1.png" mode="aspectFill"></image>
                      <navigator url="/subpkg/hotposts-ranking/hotposts-ranking" hover-class="none"
                        class="main-content">
                        <view class="official-hot-session">
                          <view class="official">
                            Campus circle官方
                          </view>
                          <view class="session">
                            2023.08.23期
                          </view>
                        </view>
                        <view class="hot-slogan">
                          火热帖子都在这，在这里看到身边发生的火热的一切！！！
                        </view>
                        <view class="hot-level">
                          <view class="icon iconfont">
                            &#xe625;
                          </view>
                          <view class="num">
                            10.8w
                          </view>
                        </view>
                      </navigator>
                    </view>
                    <!-- 帖子帖子列表 -->
                    <view style="margin-top: 40rpx;" v-for="post in commonPostList" :key="post.id">
                      <post-item :post="post" page="index" @focus-handler="onFocusClick"></post-item>
                    </view>
                  </view>
                </z-paging>
              </swiper-item>
            </swiper>
          </view>
        </template>
        <template v-slot:关注>
          <view class="focus-inner-box" @touchmove="onSubTabTouchMove">
            <!-- 帖子列表区域 -->
            <z-paging ref="pagingfocus" v-model="focusPostList" cache-key="focusPostList" @onRefresh="onRefreshHandler"
              @scroll="onScroll" @query="onFocusQuery">
              <view class="scroll-content">

              </view>
            </z-paging>
          </view>

        </template>
      </cc-tab>
      <cc-toast ref="ccToast"></cc-toast>
    </view>
    <custom-tab-bar></custom-tab-bar>
  </view>
</template>

<script>
  import customTabBar from "@/components/custom-tab-bar/custom-tab-bar.vue"
  import ccTab from "@/components/cc-tab/cc-tab.vue"
  import naviHeightMix from "@/mixins/get-NavigationBar_Height.js"
  import postItem from "@/components/posts-item/posts-item.vue"
  import ccToast from "@/components/cc-toast/cc-toast.vue"
  import {
    mapState
  } from "vuex";
  export default {
    mixins: [naviHeightMix],
    computed: {
      ...mapState('m_app', ["bangs_Height"])
    },
    data() {
      return {
        tabList: [{
            name: "推荐",
            slotName: 'recommend'
          },
          {
            name: "关注",
            slotName: 'focus'
          },
        ],
        sub_TabList: [{
          name: '全部展示'
        }, {
          name: '二手'
        }, {
          name: '求购'
        }, {
          name: '求助'
        }, {
          name: '帖子'
        }],
        subCurrent: 0,
        demoList: [{
          id: 1,
          user_avatar: "/static/avatar.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。",
          post_cover: "/static/post-cover3.png",
          picture_list: [
            "/static/post-cover3.png",
            "/static/post-cover4.png"
          ]
        }, {
          id: 11,
          user_avatar: "/static/avatar.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。",
          post_cover: "/static/post-cover3.png",
          picture_list: [
            "/static/post-cover3.png",
          ]
        }, {
          id: 12,
          user_avatar: "/static/avatar.png",
          user_name: "暗裔   亚克托斯",
          pub_time: "10分钟前",
          views_count: "1.2w",
          hot_count: "1.1w",
          post_title: "淘宝上面买的Teva的凉鞋，37码，全新，只试穿过一次，很新，现在399元出了。",
          post_cover: "/static/post-cover4.png",
          picture_list: [
            "/static/post-cover4.png"
          ]
        }],
        postList: [],
        idlePostList: [],
        buyPostList: [],
        helpPostList: [],
        commonPostList: [],
        focusPostList: [],
        scrollDeraction: 0
      };
    },
    onLoad() {
      uni.hideTabBar()
      // 首先请求全部展示的帖子
      this.$refs.paging.reload()
    },
    methods: {
      onRefreshHandler: function() {
        this.scrollDeraction = !this.scrollDeraction
      },
      onScroll: function(e) {
        if (e.detail.deltaY < 0) {
          this.$refs.ccTab.scrollDirection = "up"
        } else {
          this.$refs.ccTab.scrollDirection = "down"
        }
      },
      onSubTabTouchMove: function(e) {
        this.$refs.ccTab.touchMove(e)
      },
      // 主 Tab 栏点击
      onClickTab: function(current, index) {
        if (current === index) {
          if (this.tabList[index].name === '推荐') {
            this.$refs.paging.reload()
            this.scrollDeraction = !this.scrollDeraction
          } else if (this.tabList[index].name === '关注') {
            this.$refs.pagingfocus.reload()
            this.scrollDeraction = !this.scrollDeraction
          }
        } else {
          if (this.tabList[index].name === '推荐' && uni.getStorageSync('z-paging-cache-postList').length === 0) {
            this.$refs.paging.reload()
          } else if (this.tabList[index].name === '关注' && uni.getStorageSync('z-paging-cache-focusPostList')
            .length === 0) {
            this.$refs.pagingfocus.reload()
          }
        }
      },
      // 主 Swiper 切换
      onChangeSwiper: function(e) {
        if (this.tabList[e].name === '推荐' && uni.getStorageSync('z-paging-cache-postList').length === 0) {
          this.$refs.paging.reload()
        } else if (this.tabList[e].name === '关注' && uni.getStorageSync('z-paging-cache-focusPostList').length === 0) {
          this.$refs.pagingfocus.reload()
        }
      },
      // 副 Tab 栏切换
      onSubTabChange: function(e) {
        if (this.subCurrent === e.index) {
          // 点击相同项时刷新页面
          if (e.name === "全部展示") {
            this.$refs.paging.reload()
            this.scrollDeraction = !this.scrollDeraction
          } else if (e.name === "二手") {
            this.$refs.pagingidle.reload()
            this.scrollDeraction = !this.scrollDeraction
          } else if (e.name === "求购") {
            this.$refs.pagingbuy.reload()
            this.scrollDeraction = !this.scrollDeraction
          } else if (e.name === "求助") {
            this.$refs.paginghelp.reload()
            this.scrollDeraction = !this.scrollDeraction
          } else if (e.name === "帖子") {
            this.$refs.pagingcommon.reload()
            this.scrollDeraction = !this.scrollDeraction
          }
        } else {
          // 点击不同项时如果没有数据则加载数据
          this.onInitReload(e.index)
        }

        this.subCurrent = e.index
      },
      // 初始化时索引切换分情况刷新数据
      onInitReload: function(index) {
        if (this.sub_TabList[index].name === "全部展示" && uni.getStorageSync('z-paging-cache-postList').length === 0) {
          this.$refs.paging.reload()
        } else if (this.sub_TabList[index].name === "二手" && uni.getStorageSync('z-paging-cache-idlePostList')
          .length === 0) {
          this.$refs.pagingidle.reload()
        } else if (this.sub_TabList[index].name === "求购" && uni.getStorageSync('z-paging-cache-buyPostList')
          .length === 0) {
          this.$refs.pagingbuy.reload()
        } else if (this.sub_TabList[index].name === "求助" && uni.getStorageSync('z-paging-cache-helpPostList')
          .length === 0) {
          this.$refs.paginghelp.reload()
        } else if (this.sub_TabList[index].name === "帖子" && uni.getStorageSync('z-paging-cache-commonPostList')
          .length === 0) {
          this.$refs.pagingcommon.reload()
        }
      },
      // 切换副 Swiper 
      onSubSwiperChange: function(e) {
        if (e.detail.source === '') return

        const current = e.detail.current
        // 切换不同项时如果没有数据则加载数据
        this.onInitReload(current)

        this.subCurrent = current
      },
      // 点击关注
      onFocusClick: function(e) {
        if (e) {
          this.$refs.ccToast.show({
            toastText: "关注成功"
          })
        } else {
          this.$refs.ccToast.show({
            toastText: "取消关注"
          })
        }
      },

      // @query：请求开始
      // pageNo：当前第几页；
      // pageSize：每页多少条；

      // 全部展示请求
      onQuery: function(pageNo, pageSize) {
        // 请求完成：this.$refs.paging[0].complete(服务器返回的数组)
        this.$refs.paging.complete(this.demoList)

        // 请求失败：this.$refs.paging.complete(false);
        // 或全局配置：底层请求抛出异常时：uni.$emit('z-paging-error-emit');
      },
      // 二手请求
      onIdleQuery: function() {
        this.$refs.pagingidle.complete(this.demoList)
      },
      // 求购请求
      onBuyQuery: function() {
        this.$refs.pagingbuy.complete(this.demoList)
      },
      // 求助请求
      onHelpQuery: function() {
        if ([].length === 0) {
          this.$refs.paginghelp.complete([])
        }
        this.$refs.paginghelp.complete([])
      },
      // 帖子请求
      onCommonQuery: function() {
        this.$refs.pagingcommon.complete(this.demoList)
      },
      // 关注请求
      onFocusQuery: function() {
        this.$refs.pagingfocus.complete([])
      },
    },
    components: {
      customTabBar,
      ccTab,
      postItem,
      ccToast
    }
  }
</script>

<style lang="scss">
  .index-container {
    height: 100%;

    .top-title-bar {
      display: flex;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);

      .left-my-avatar {
        margin: 0 40rpx;

        .inner-img {
          vertical-align: baseline;
          width: 36px;
          height: 36px;
        }
      }

      .follow-title {
        font-size: 17px;
        font-weight: 800;
      }
    }

    .index-main-wrapper {
      padding-top: 20rpx;
      box-sizing: border-box;

      .tab-inner-box {
        width: 120rpx;
        height: 70rpx;
        padding-bottom: 40rpx;
        line-height: 70rpx;
      }

      .recommend-inner-box {
        height: 100%;

        .sub-tab-wrap {
          padding: 0 40rpx 20rpx;
          background-color: #FFF;

          .u-tabs__wrapper__nav {
            justify-content: space-between;

            .u-tabs__wrapper__nav__item {
              flex: none !important;
            }
          }
        }

        .scroll-content {
          box-sizing: border-box;
          padding: 0 40rpx;

          .main-focus-content {
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 400rpx;
            border-radius: 12rpx;
            color: #FFF;

            .bg-img {
              position: absolute;
              top: 0;
              width: 100%;
              height: 100%;
              z-index: -1;
            }

            .main-content {
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;

              .official-hot-session {
                display: flex;
                font-size: 28rpx;


                .official {
                  margin-left: 20rpx;
                  margin-right: 40rpx;
                }
              }

              .hot-slogan {
                margin-right: 20rpx;
                margin-left: 20rpx;
                padding-top: 10rpx;
                font-size: 32rpx;
              }

              .hot-level {
                margin: 20rpx;
                display: flex;

                .icon {
                  margin-right: 8rpx;
                  font-size: 28rpx;
                  line-height: 34rpx;
                }
              }
            }
          }
        }
      }

      .focus-inner-box {
        height: 100%;
      }
    }
  }
</style>